<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>GameRoot</title>
    <!-- meta使用viewport以确保页面可自由缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- 引入 jQuery Mobile 样式 -->
    <link
      rel="stylesheet"
      href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"
    />

    <!--&lt;!&ndash; 引入 jQuery 库 &ndash;&gt;-->
    <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>

    <!-- 引入 jQuery Mobile 库 -->
    <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden;
      }

      #cas {
        z-index: -1;
        position: absolute;
        background-color: #47a0dc;
      }

      .img-icon {
        margin: 1px;
      }
    </style>
  </head>
  <body>
    <canvas id="cas"></canvas>
    <script>
      var canvas = document.getElementById("cas");
      var ctx = canvas.getContext("2d");

      resize();
      window.onresize = resize;

      function resize() {
        canvas.width =
          window.innerWidth ||
          document.documentElement.clientWidth ||
          document.body.clientWidth;
        canvas.height =
          window.innerHeight ||
          document.documentElement.clientHeight ||
          document.body.clientHeight;
      }

      var RAF = (function () {
        return (
          window.requestAnimationFrame ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame ||
          window.oRequestAnimationFrame ||
          window.msRequestAnimationFrame ||
          function (callback) {
            window.setTimeout(callback, 1000 / 60);
          }
        );
      })();

      // 鼠标活动时，获取鼠标坐标
      var warea = { x: null, y: null, max: 20000 };
      window.onmousemove = function (e) {
        e = e || window.event;

        warea.x = e.clientX;
        warea.y = e.clientY;
      };
      window.onmouseout = function (e) {
        warea.x = null;
        warea.y = null;
      };

      // 添加粒子
      // x，y为粒子坐标，xa, ya为粒子xy轴加速度，max为连线的最大距离
      var dots = [];
      for (var i = 0; i < 300; i++) {
        var x = Math.random() * canvas.width;
        var y = Math.random() * canvas.height;
        var xa = Math.random() * 2 - 1;
        var ya = Math.random() * 2 - 1;

        dots.push({
          x: x,
          y: y,
          xa: xa,
          ya: ya,
          max: 6000,
        });
      }

      // 延迟100秒开始执行动画，如果立即执行有时位置计算会出错
      setTimeout(function () {
        animate();
      }, 100);

      // 每一帧循环的逻辑
      function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // 将鼠标坐标添加进去，产生一个用于比对距离的点数组
        var ndots = [warea].concat(dots);

        dots.forEach(function (dot) {
          // 粒子位移
          dot.x += dot.xa;
          dot.y += dot.ya;

          // 遇到边界将加速度反向
          dot.xa *= dot.x > canvas.width || dot.x < 0 ? -1 : 1;
          dot.ya *= dot.y > canvas.height || dot.y < 0 ? -1 : 1;

          // 绘制点
          ctx.fillRect(dot.x - 0.5, dot.y - 0.5, 1, 1);

          // 循环比对粒子间的距离
          for (var i = 0; i < ndots.length; i++) {
            var d2 = ndots[i];

            if (dot === d2 || d2.x === null || d2.y === null) continue;

            var xc = dot.x - d2.x;
            var yc = dot.y - d2.y;

            // 两个粒子之间的距离
            var dis = xc * xc + yc * yc;

            // 距离比
            var ratio;

            // 如果两个粒子之间的距离小于粒子对象的max值，则在两个粒子间画线
            if (dis < d2.max) {
              // 如果是鼠标，则让粒子向鼠标的位置移动
              if (d2 === warea && dis > d2.max / 2) {
                dot.x -= xc * 0.03;
                dot.y -= yc * 0.03;
              }

              // 计算距离比
              ratio = (d2.max - dis) / d2.max;

              // 画线
              ctx.beginPath();
              ctx.lineWidth = ratio / 2;
              ctx.strokeStyle = "rgba(0,0,0," + (ratio + 0.2) + ")";
              ctx.moveTo(dot.x, dot.y);
              ctx.lineTo(d2.x, d2.y);
              ctx.stroke();
            }
          }

          // 将已经计算过的粒子从数组中删除
          ndots.splice(ndots.indexOf(dot), 1);
        });

        RAF(animate);
      }
    </script>
    <div
      class="container"
      data-role="page"
      style="
        /* background-image: url(img/tit-bg.png); */
        width: 80;
        filter: alpha(Opacity=80);
        -moz-opacity: 0.5;
        opacity: 0.5;
        z-index: -100;
        background-color: #ffffff;
      "
    >
      <ul data-role="listview" data-inset="true" data-shadow="false">
        <li>
          <a href="javascript:hybrid.go('2048')">
            <img src="./res/icon.png" class="img-icon" />
            <h2>Google Chrome</h2>
            <p>Google Chrome 免费的开源 web 浏览器。发布于 2008 年。</p>
          </a>
        </li>
        <li>
          <a href="javascript:hybrid.go('schulte')">
            <img class="img-icon" src="./res/icon.png" />
            <h2>Google Chrome</h2>
            <p>Google Chrome 免费的开源 web 浏览器。发布于 2008 年。</p>
          </a>
        </li>
        <li>
          <a href="javascript:hybrid.go('towerBuild')">
            <img class="img-icon" src="./res/icon.png" />
            <h2>Google Chrome</h2>
            <p>Google Chrome 免费的开源 web 浏览器。发布于 2008 年。</p>
          </a>
        </li>
        <li>
          <a href="javascript:hybrid.go('sensor')">
            <img class="img-icon" src="./res/icon.png" />
            <h2>Google Chrome</h2>
            <p>Google Chrome 免费的开源 web 浏览器。发布于 2008 年。</p>
          </a>
        </li>
        <li>
          <a href="javascript:hybrid.go('memory')">
            <img class="img-icon" src="./res/icon.png" />
            <h2>Google Chrome</h2>
            <p>Google Chrome 免费的开源 web 浏览器。发布于 2008 年。</p>
          </a>
        </li>
        <li>
          <a href="javascript:hybrid.go('square')">
            <img class="img-icon" src="./res/icon.png" />
            <h2>Google Chrome</h2>
            <p>Google Chrome 免费的开源 web 浏览器。发布于 2008 年。</p>
          </a>
        </li>
      </ul>
    </div>
  </body>
</html>
